<template>
    <van-popup id="popup" :show="props.show" position="bottom" :lazy-render="true" :close-on-popstate="true"
        close-icon-position="top-left" duration="0" verlay>
        <img class="avatar" :src="imgUrl" alt="头像" />
        <span class="word_left" @click="handleClick">重拍</span>
        <span class="word_right" @click="handleClickOk">使用照片</span>
    </van-popup>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// /my/set/setAvatar/determineAvatar

const props = defineProps({
    show: Boolean,
    // 其他props...
    imgUrl: String
})

const emits = defineEmits(['closePopup'])

const handleClick = (event: MouseEvent) => {
    emits('closePopup') // 触发自定义事件，通知父组件关闭popup
}

const handleClickOk = () => {
    router.push({
        // path: '/my/set/setAvatar/determineAvatar',
        name: "DetermineAvatar",
        query: {
            imgUrl: props.imgUrl
        }
    })
}
</script>

<style scoped>
#popup {
    height: 100%;
    background-color: #000000;
    text-align: center;
    /* 新增：使文字居中对齐 */
}

.avatar {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 77%;
    object-fit: cover;
    object-position: 50% 50%;
    margin-top: 10vh;
}

.word_left {
    display: inline-block;
    margin: 0 auto;
    width: 50%;
    height: 10%;
    font-size: 14px;
    color: #ffffff;
    margin-top: 10px;
    line-height: 50px;
}

.word_right {
    display: inline-block;
    margin: 0 auto;
    width: 50%;
    height: 10%;
    font-size: 14px;
    color: #ffffff;
    margin-top: 10px;
    line-height: 50px;
}
</style>